<template>
  <div class="append-form">
    <a-card class="card">
      <a-form ref="appendRef">
        <a-row :gutter="24">
          <template v-for="(item, index) in formState.list" :key="item.key">
            <a-col :span="10">
              <a-form-item :name="item.value" :label="item.name">
                <a-input v-model:value="item.value" placeholder="请输入"></a-input>
              </a-form-item>
            </a-col>
            <a-col v-if="index === 1" :span="4">
              <a-button size="mini" @click="onAddFormItem">
                <template #icon>
                  <plus-outlined />
                </template>
              </a-button>
            </a-col>
            <a-col v-else-if="index % 2 !== 0">
              <a-button size="mini" @click="onDeleteFormItem(index)">
                <template #icon>
                  <minus-outlined />
                </template>
              </a-button>
            </a-col>
          </template>
        </a-row>
        <a-row>
          <a-col :span="24" style="text-align: left">
            <a-button type="primary" html-type="submit" @click="onFinish">查询</a-button>
            <a-button style="margin: 0 8px" @click="onreset">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </div>
</template>
<script lang='ts' setup name="appendForm">
import { FormInstance, message } from 'ant-design-vue';
import { reactive, ref } from 'vue';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
import { json } from 'stream/consumers';
const formState = reactive<{
  list: DomainItem[]
}>({
  list: [
    {
      key: 1,
      value: '',
      name: '字段1'
    },
    {
      key: 2,
      value: '',
      name: '字段2'
    }
  ],
})

interface DomainItem {
  key: number
  value: string,
  name: string
}

const appendRef = ref<FormInstance>();

const onFinish = () => {
  message.success({
    content: JSON.stringify(formState.list)
  })
}
const onreset = () => {
  formState.list.splice(2);
  formState.list.forEach(item => {
    item.value = '';
  })
}
const onAddFormItem = () => {
  let len = formState.list.length + 1;
  const item1: DomainItem = {
    key: len,
    value: '',
    name: '字段' + len
  }
  len = formState.list.length + 1;
  const item2: DomainItem = {
    key: len,
    value: '',
    name: '字段' + len
  }
  formState.list.push(item1);
  formState.list.push(item2);
}

const onDeleteFormItem = (index: number) => {
  const list = formState.list;
  list.splice(index - 1, 2);
}
</script>
<style lang='less' rel='stylesheet/less' scoped>
.append-form {
  margin: 20px;
  height: calc(100% - 80px);

  .card {
    height: 100%;
    overflow: scroll;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 12%);
    border-radius: 4px;
    margin: 8px 5px;
  }
}
</style>